layui.use(['layer', 'table', 'element'], function () {
    let layer = layui.layer //弹层
        , table = layui.table //表格


    //第一个实例
    table.render({
        elem: '#commentList'
        ,url: '/comment/list' //数据接口
        ,request: {
            pageName: 'pageNum' //页码的参数名称，默认：page
            , limitName: 'limit' //每页数据量的参数名，默认：limit
        }
        ,page: { //开启分页
            limit: 6,
            limits: [6, 8, 10]
        }
        ,toolbar: '#headerBar'
        ,cols: [
            [ //表头
            {type: 'numbers', title: '序号', align: 'center', width: 60},
            {field: 'id', title: 'ID', align: 'center', width: 80}
            ,{field: 'username', title: '用户', align: 'center', width: 130}
            ,{field: 'title', title: '书名', align: 'center'}
            ,{field: 'content', title: '评论内容', align: 'center'}
            ,{field: 'created', title: '发布时间', align: 'center',
                    templet: "<div>{{layui.util.toDateString(d.updateTime, 'yyyy-MM-dd HH:mm:ss')}}</div>"}
            ,{field: 'status', title: '状态', align: 'center', width: 140,
                templet: function (d) {
                    if (d.status === 1) {
                        return "<button class='layui-btn layui-btn-sm layui-btn-radius' style='background-color: #95e1d3' disabled>已审核</button>";
                    } else {
                        return "<button class='layui-btn layui-btn-sm layui-btn-radius layui-btn-danger' style='background-color: #ffb6b9' disabled>待审核</button>";
                    }
                }}
            ,{align: 'center', title: '操作', toolbar: '#commentListBar', unresize: 'true', }
        ]
        ]
        ,parseData: function (res) {
            return {
                "code": res.code, //解析接口状态
                "msg": res.msg, //解析提示文本
                "count": res.count, //解析数据长度
                "data": res.data //解析数据列表
            };
        }
    });


    // 工具头
    table.on('toolbar(commentTable)', function(obj){
        switch (obj.event) {
            case 'refresh': // 单击了刷新按钮
                // 表格重载
                table.reload('commentList', {
                    url: '/comment/list', //数据接口
                    request: {
                        pageName: 'pageNum' //页码的参数名称，默认：page
                        , limitName: 'limit' //每页数据量的参数名，默认：limit
                    }
                    , page: { //开启分页
                        curr: 1,
                        limit: 6,
                        limits: [6, 8, 10]
                    }
                })
                break;
        }
    });


    // 工具条（监听行）
    table.on('tool(commentTable)', function(obj){
        let data = obj.data;    // 获取当前行数据
        let layEvent = obj.event;   // 获取lay-event对应的值（show、agree、delete）
        switch(obj.event){
            case 'check':   // 查看
                layer.open({
                    title: '查看评论'
                    ,content: data.content
                    ,shadeClose: true
                });
                break;
            case 'refute':  // 驳斥
                changeStatus("驳斥", data);
                break;
            case 'ratify':  // 批准
                changeStatus("批准", data);
                break;
            case 'delete':  // 删除
                deleteComment(data, obj);
                break;
        };
    });


    // 变更审核状态
    function changeStatus(tip, data) {
        layer.confirm('您将<span style="color: red">' + tip + '</span>这条评论，是否操作？', {icon: 3, title:'提示'},
            function(index){
                let status = 1 ^ data.status;
                $.ajax({
                    url: '/comment/changeStatus',
                    type: 'post',
                    data: JSON.stringify({id: data.id, status: status}),
                    contentType: 'application/json;charset=UTF-8',
                    success: function (data) {
                        if (data !== 0) {
                            layer.msg('操作成功！', {icon: 1, time: 1300}, function () {
                                location.reload();
                            });
                        } else {
                            layer.msg('操作失败！', {icon: 0, time: 1600});
                        }
                    },
                    error: function () {
                        layer.msg("服务器开小差了……", {icon: 2, anim: 6});
                    }
                })
            layer.close(index);
        });
    }

    // 删除评论
    function deleteComment(data, obj) {
        layer.confirm('确定<span style="color: red">删除</span>该评论嘛？', {icon: 3, title: '警告', shadeClose: true},
            function (index) {
                $.ajax({
                    url: '/comment/delete',
                    type: 'post',
                    data: JSON.stringify({id: data.id}),
                    contentType: 'application/json;charset=UTF-8',
                    success: function (data) {
                        console.log("删除评论的返回值：" + data);
                        if (data !== 0) {
                            layer.msg('删除成功！', {icon: 1, time: 1300}, function () {
                                obj.del();
                            });
                        } else {
                            layer.msg('删除失败！', {icon: 0, time: 1600}, function () {
                            });
                        }
                    },
                    error: function () {
                        layer.msg("服务器开小差了……", {icon: 2, anim: 6});
                    }
                })
        });
    }

});